<template>
  <div class="box Listsboxs">
    <div class="rightbox">
      <!-- 图片区域 -->
      <div class="myimg" v-if="myimage != ''">
        <img
          v-if="newList == ''"
          id="myone"
          :src="'data:image/png;base64,' + myimage"
          :style="{
            width: width * num * 0.6 + 'px',
            height: height * num * 0.6 + 'px',
            marginLeft: loctionleft + 'px',
            marginTop: loctiontop + 'px',
          }"
        />
        <!--     src="https://tse1-mm.cn.bing.net/th/id/OIP-C.3HKXXlphGxqZLkk9_RyVtAAAAA?w=180&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7" -->
        <img
          v-if="newList != ''"
          id="myone"
          :src="'data:image/png;base64,' + newimage"
          :style="{
            width: width * num * 0.6 + 'px',
            height: height * num * 0.6 + 'px',
            marginLeft: loctionleft + 'px',
            marginTop: loctiontop + 'px',
          }"
        />
       
        <span
              v-for="item in scanData"
              id="scanDatas"
              style="pointer-events: none;text-align: center; color: #ddd;"
              :style="{
                width: 10*0.6 * num + 'px',
                height: 10*0.6 * num + 'px',
                top: (height-(item.y / 10.0) / 5) * 0.6 * num + loctiontop +
                'px',
              left: (((item.x / 10.0) / 5)) * 0.6 * num + loctionleft + 'px',
              }"
            ></span>
            <img
          src="../assets/车辆.png"
          alt=""
          :style="{
            transform: 'rotate(' + -(fused_angle * 180 / Math.PI +90) + 'deg)',
            top: (height - (y / 10.0) / 5 ) * 0.6 * num -(30* 0.6 * num/2)+ loctiontop + 'px',
            left: ((x / 10.0) / 5) * 0.6 * num-(15* 0.6 * num/2) + loctionleft + 'px',
            width: 15*num * 0.6+ 'px',
            height: 30 *num* 0.6+ 'px',
          }"
          id="vehicle"
        />
        <!-- 当用户没有点击地图列表时默认显示以下结构     -->
        <!--平移按钮 -->
        <van-button @click="right" class="right"
          ><van-icon name="arrow" size="44"
        /></van-button>
        <van-button @click="left" class="left"
          ><van-icon name="arrow-left" size="44"
        /></van-button>
        <van-button @click="top" class="top"
          ><van-icon name="arrow-up" size="44"
        /></van-button>
        <van-button @click="bottom" class="bottom"
          ><van-icon name="arrow-down" size="44"
        /></van-button>
      </div>
      <!-- --------------------------------------------------------------按钮放大缩小区域 -->
      <div class="mybig" v-if="myimage != ''">
        <van-button type="info" @click="big"
          ><i class="iconfont icon-sousuofangda" style="fontSize: 28px"></i
        ></van-button>
        <van-button type="info" @click="min"
          ><i class="iconfont icon-suoxiao" style="fontSize: 28px"></i
        ></van-button>
      </div>
      <!-- --------------------------------------------------------------按钮放大缩小区域 -->
      <!-- -------------------------------------------------------------------地图信息 -->
      <div class="mapInfo" v-if="!fromShow">
        <!-- 按钮区域 -->
        <div class="mybutton">
          <van-button type="info" @click="onbutton" v-if="newList != ''"
            >应用</van-button
          >
          <div v-if="seveShow">
            <van-button size="large" @click="seve">保存</van-button>
            <van-button size="large" @click="cancel">取消</van-button>
          </div>
        </div>

        <div class="map">地图信息</div>
        <div class="myinfo">
          <div class="info">
            <div>
              <span>名称:</span>
              <span v-if="newList.length > 0" style="color:#fff;marginLeft">{{ newList }}</span>
              <span v-if="newList.length == 0" style="color:#fff;marginLeft">{{ datas.filename }}</span>
            </div>
            <div>
              <span>地图大小:</span>
              <span v-if="newList.length > 0" style="color:#fff">{{ width }}x{{ height }}</span>
              <span v-if="newList.length == 0" style="color:#fff">{{ width }}x{{ height }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- -------------------------------------------------------------------地图信息 -->
    </div>

    <van-popup
      v-model="fromShow"
      :key="formKey"
      :close-on-click-overlay="false"
    >
      <!-- <van-nav-bar
        title="保存地图"
        left-arrow
        left-text="返回"
        @click-left="onClickLeft"
      /> -->
      <van-form @submit="onSubmit" label-width="50px">
      <keyboardss :inputValue="filename"  class="keyup" @keyList='onfilename'></keyboardss>
        <!-- <van-field
          v-model="filename"
          label="地图名"
          placeholder="请出入地图名"
          :rules="rules.filename"
        /> -->
        <div style="margin: 16px" class="newbutton">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            :loading="loading"
            loading-text="保存中..."
            >保存</van-button
          >
          <van-button round block type="info" @click="onClickLeft"
            >取消</van-button
          >
        </div>
      </van-form>
      <!-- <div class="keyboard-mask">
        <keyboard
          @onChange="onChange"
          @onKeyPress="onKeyPress"
          v-if="keyshow"
        />
      </div> -->
    </van-popup>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
// 导入提示确认框组件
// import { Dialog } from "vant";
// 导入yaml格式进行获取到数据的转换
import yaml from "js-yaml";
// 导入保存地图信息接口
import { saveApi, cancelApi,overApi } from "@/api/map";
export default {
  props: ["list", "newList", "newfilename", "seveShow", "newimage", "keyshow",'addList'], //接受父组件中传递过来的数据
  created() {},
  data() {
    return {
      x: "", //保存x轴坐标
      y: "", //保存y轴坐标
      fused_angle: "", //定义一个变量保存角度
      datas:[],
      scanData:[],
      loading: false, //控制保存后的加载状态
      loctiontop: 0,
      loctionleft: 0,
      formKey: 0, //控制表单的验证
      fromShow: false, //控制保存表单的显示和隐藏
      img: false, //控制裁剪显示与隐藏
      mapList: [], //定义一个数组用来保存地图数据
      myimage: "", //定义一个保存base64图片的地址
      cropShow: false, //控制裁剪盒子的显示与隐藏
      cropImg: "", //图片裁剪盒子
      newsplit: "", //用来保存分割好的字符串base64格式
      cmd: 1, //获取地图列表传入的参数
      newName: [], //定义一个数组用来保存获取到地图列表的名字
      width: "", //图片的宽度
      height: "", //图片的高度
      num: 0.5, //图片的缩放比例
      projectname: "slam", //需要保存的数据参数

      filename: '', //需要保存的数据参数
      rules: {
        filename: [
          { required: true },
          // { pattern: /^[a-zA-Z0-9_]{0,}$/, message: "请输入正确的地图名" },
        ],
      },
    };
  },
  created() {
    this.gain(); //一进入页面就调用获取页面数据的方法
  },

  mounted() {
    let numss = Cookies.get('nums');
    let loctiontopss = Cookies.get('loctiontops');
    let loctionleftss = Cookies.get('loctionlefts');
    if(numss == undefined){
    }else{
      this.num = Number(numss);
    }
    if(loctiontopss == undefined){
    }else{
      this.loctiontop = Number(loctiontopss);
    }
    if(loctionleftss == undefined){
    }else{
      this.loctionleft = Number(loctionleftss);
    }
  },

  methods: {

    //键盘输入事件
    onfilename(val){
      if(val==undefined || val=='undefined' || val=='undefine' ){

      }else{
        this.filename=val
      }

      console.log(this.filename);
    },
    //应用事件
   async onbutton() {
      //生成自定义事件修改改父组件传过来的值
      try{
        let res=await overApi({
          filename:this.newList
        })
        //生成自定义事件修改父组件中的值
          this.$emit("empty", "");
          // 提示用户应用成功
          this.$toast.success('应用成功')
      }catch{
        //提示用户应用失败
        this.$toast.fail('应用失败')
      }
        console.log(res,'应用');
    },

    //点击保存按钮进行输入名称
    openKey() {
      //生成自定义事件修改父组件中的值
      this.$emit("openKey", true);
    },
    //-----------------------------------------------------------表单导航栏的返回按钮
    onClickLeft() {
      this.fromShow = false;
      this.formKey++; //清空表单的验证
      this.filename = "";
      //生成自定义事件修改父组件中的值
      //this.$emit("onhide", false);
      // 把二级路由的状态改为显示
      this.$store.commit("changShow", true);
    },

    //------------------------------------------------------------------保存按钮事件
    seve() {
      // 把二级路由的状态改为显示
      this.$store.commit("changShow", false);
      //把表单改为显示
      this.fromShow = true;
      var index = Math.floor(Math.random() * newname.length);
      this.filename = newname[index];
      // console.log(index,'构图数据');
    },

    //声明一个事件进行修改父组件中的值
    revamp() {
      this.$emit("newrevamp");
    },

    // 取消按钮事件
    async cancel() {
      this.$emit("onhide", false);
      this.$toast.success("取消成功");
      let res = await cancelApi(this.cmd);
    },

    //提交保存数据
    async onSubmit() {
      console.log(this.filename)
      // 把加载状态改为true
      this.loading = true;
      //生成自定义事件修改父组件中的值
      this.$emit("onhide", false);
      try {
        var timestamp = Date.parse(new Date());
        // 向后端发起请求修改数据
        let res = await saveApi({
          projectname: this.projectname, //传递参数
          filename: this.filename, //传递参数
        });
        console.log(res, "保存地图区域");
        // console.log(timestamp, "保存时间戳");
        //调用父组件中方法进行刷新页面获取数据
        this.addList()
        //清空输入框
        this.$emit('empty','')
      } catch {
        this.$toast.fail("保存失败");
      }
      // 把二级路由的状态改为显示
      this.$store.commit("changShow", true);
      this.$toast.success("保存成功"); //提示用户保存成功
      this.fromShow = false; //将表单隐藏
      this.filename = ""; //清空输入框中的数据
      this.loading = false; //把加载状态改隐藏
    },

    //放大图片按钮
    big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },
    //用来获取数据的方法
    gain() {
       let ws = new WebSocket("ws://"+window.location.hostname+":10009");  //获取本地服务器端口号
      //   let ws = new WebSocket("ws://192.168.20.101:10009");
      ws.onmessage = (e) => {
        //使用箭头函数改变this的指向
        // 当服务器有消息，就会自动调用这个函数
        // e.data有服务器返回的数据
        const res = yaml.load(e.data); //使用yaml格式进行转换
        if (res.uri == "/sirius/topics/slam_grid_map") {
          //判断res中的uri路劲是不是等于有图片的路径
          this.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
          this.width = res.info.width; //保存宽度
          this.height = res.info.height; //保存高度
          this.datas = res; //保存高度
        } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
          this.x = res.fused_x; //给x轴坐标赋值
          this.y = res.fused_y; //给y轴坐标赋值
          this.fused_angle = res.fused_angle; //保存角度
          //console.log(this.x, this.y, "位置坐标");
        }
        // else if (res.uri == "/sirius/topics/scan_head") {
        //   let datas = res.data; //保存获取到的x轴坐标
        //   let arrs = [];
          
        //   for (let a = 0; a < datas.x.length; a++) {
        //     let objs = {};
        //     objs.x = datas.x[a];
        //     objs.y = datas.y[a];
        //     objs.z = datas.z[a];
        //     arrs.push(objs);
        //   }
        //   this.scanData = arrs;
        //   //console.log(this.scanData)

        // }
      };
    },
    right() {
      this.loctionleft += 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    left() {
      this.loctionleft -= 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    top() {
      this.loctiontop -= 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    bottom() {
      this.loctiontop += 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
  },

  //注册局部组件指令
  directives: {
    drag: function (el) {
      let dragBox = el;
      dragBox.onmousedown = (e) => {
        //算出鼠标相对元素的位置
        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        console.log(disX, disY);
        document.onmousemove = (e) => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          //这个 170 是我元素宽的一半
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          //移动当前元素
          dragBox.style.left = left + "px";
          dragBox.style.top = top + "px";
          console.log(left, top);
        };
        document.onmouseup = (e) => {
          //鼠标弹起来的时候不再移动
          document.onmousemove = null;
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    },
  },
};
</script>

<style lang="less" scoped>
.childrenList {
  width: 100%;
  .myimg {
    // text-align: center;
    margin: 0 auto;
    height: 400px;
    overflow: hidden;
    border: 2px solid black;
    margin-left: 40px;
    // width: 600px !important;
    position: relative;
    .right {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      position: absolute;
      top: 40%;
      right: 38%;
      color: #1ac1c1;

      z-index: 1000;
      border: none;
    }
    .left {
      position: absolute;
      top: 40%;
      left: -35px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;

      border: none;
      z-index: 1000;
    }
    .top {
      position: absolute;
      top: -35px;
      right: 64%;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;

      z-index: 1000;
      border: none;
    }
    .bottom {
      position: absolute;
      bottom: -35px;
      right: 64%;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;
      z-index: 1000;
      border: none;
    }
    #myone {
      margin: 0 auto;
      // margin-left: 300px;
      overflow: hidden;
      // width: 880px !important;
      flex: 1;
      position: relative;
      // top: 10%;
      // left: 15%;
      z-index: 1000;
      ::v-deep img {
        width: auto !important;
      }
    }
   
  }

  .mapInfo {
    z-index: 3333;
    position: fixed;
    right: 0;
    top: 112px;
    height: 1000px;
    width: 220px;
    background-color: #12151a;
    .map {
      background-color: #212430;
      text-align: center;
      font-size: 24px;
      color: white;
      height: 50px;
      line-height: 50px;
      border-radius: 12px 12px 0 0;
    }
    .myinfo {
      background-color: #181a23;
      height: 100%;
      .info {
        display: inline-block;
        padding-left: 20px;
        margin-top: 12px;
        div {
          margin-bottom: 10px;
        }
        span {
          font-size: 20px;
          color: #dbdbdb;
        }
      }
    }
    .mybutton {
      padding: 0 25px;
      .van-button {
        display: block;
        margin-top: 15px;
        width: 170px;
        border-radius: 10px;
        height: 40px;
        background-color: #1a1c25;
        color: black;
        font-size: 20px;
        border: none !important;
        color: #fff;
      }
    }
  }
  .rightbox {
    display: flex;
    width: 1000px !important;
    .myimg {
      flex: 1 !important;
    }
  }
}
.btn-primary {
  width: 120px;
  margin-top: 20px;
  background-color: #ffc000 !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  color: black !important;
}

::v-deep .van-popup {
  width: 100% !important;
    height:calc(~"100vh - 200px") !important;
    padding-top: 200px;
    overflow-x: hidden;
    position: fixed;
    background-color: transparent;
  top:300px;
  // margin-left: 300px;
}
.newbutton {
  position: fixed;
  top: 250px;
  left: calc(~"50% - 160px");
  display: flex;
  .van-button {
    margin: 0 auto;
    width: 150px !important;
  }
}
.mybig {
  position: fixed;
  bottom: 30px;
  right: 240px;
  .van-button {
    margin-left: 20px;
  }
}
.keyup{
  position: fixed;
  top: 200px;
  left:calc(~"50% - 150px") ;
 /deep/ .gap_input input {
    background-color: transparent !important;
    width: 300px!important;
    height: 50px;
    line-height: 50px;

    border: 2px solid #ccc!important;
    color: #fff!important;

}
}
#scanDatas {
      position: absolute;
      background-color: #feed9d;
    }
    .Listsboxs{

/deep/.keyboard{
    margin: 0px;
    margin-right: 200px;
    
    padding: 0;
    list-style: none;
    user-select: none;
    background: #fff;
    box-shadow: 0 -3px 8px 5px #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 42px 0px;
    padding-left: 20px;
    width: 100%;
    height: 150px;
    li{
      text-indent: 0;
      color: #000;

        float: left;
        text-align: center;
        margin: 0 25px 15px 0;
        width: 70px;
        height: 25px;
        line-height: 25px;
        background: #fff;
        border-radius: 15px;
        font-size: 18px;
        font-weight: 500;
        box-shadow: 0 3px 6px 0px #cac9c9;
    }
    li:nth-child(n+11){
        margin-left: 7px!important;
    }
    li:nth-child(-n+27):nth-child(n+20){
        margin-left: 10px!important;
    }
    li:nth-child(38){
      width: 150px;
      text-indent: 2.5em;
    }
}
}#vehicle {
  position: absolute;
  z-index: 1001;
}
</style>
